<template>
	<view class="organization-container">
		<view class="fixed-top" style="padding-top: 45rpx; background-color: #fff;">
			<view class="searchbar">
				<view class="search ">
					<view class="Unisearch ">
						<uni-search-bar v-model="searchValue" placeholder="输入组织名称" bgColor="none" cancelButton
							@clear="clear">
						</uni-search-bar>
					</view>
					<view class="search_title" @click="search">搜索</view>
				</view>
			</view>
			<view class="selectBar">
				<view class="item">
					<uni-data-select v-model="value1" :localdata="range1" placeholder="全部类别" @change="change1"
						:clear="true"></uni-data-select>
				</view>
				<view class="item">
					<uni-data-select v-model="value2" :localdata="range2" placeholder="智能筛选" @change="change2"
						:clear="true"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="organizationList">
			<organizationVue :data="organizationData" @ToDetail="ToOrganizationDetail">
			</organizationVue>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getDictData,
		formatterDictData,
	} from '../../common/common.js'

	import organizationVue from '../../component/commonLayout/organization.vue';

	import request from '../../api/index.js'
	const searchValue = ref('')
	const organizationType = ref('')
	const organizationData = ref([])
	const value1 = ref(0)
	const value2 = ref(0)
	const range1 = ref([

	])
	const range2 = [
		// {
		// 	value: 0,
		// 	text: "智能筛选"
		// },
		{
			value: 1,
			text: "成员最多"
		},
		{
			value: 2,
			text: "星级最高"
		},
		{
			value: 3,
			text: "时长最长"
		},

	]
	const change1 = (e) => {
		console.log("value-----", e)
		organizationType.value = e
		getOrganization();

	}
	const change2 = (e) => {
		// sort: {"currentNumber":"descend"}
		console.log("e--------", e)
		let sort = ''
		e == 1 ? sort = "currentNumber desc" : ''
		e == 2 ? sort = "starRating desc" : ''
		e == 3 ? sort = "activityDuration desc" : ''
		getOrganization(sort)

	}

	const search = () => {
		console.log('search', searchValue.value)
		getOrganization()
	}

	const clear = () => {
		console.log("----------")
		getOrganization()
	}

	onLoad(() => {
		getOrganization()
	})

	const ToOrganizationDetail = (item, data) => {
		let itemId = JSON.stringify(item)
		let itemData = JSON.stringify(data)
		console.log("itemData----", itemData)
		uni.navigateTo({
			url: `/pages/organizationDetail/organizationDetail?id=${itemId}&itemData=${itemData}`
		})
	}





	const getOrganization = (sort = null) => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		request({
			url: '/api/volunteer/teamjs/team-view',
			method: 'GET',
			data: {
				formName: 'Teamjs',
				organizationName: searchValue.value,
				organizationTypeInList: organizationType.value,
				orderBy: sort,
				statusInList: '2'


			}
		}, e => {
			if (e.success) {
				console.log('e---------111111111111----', e.data)

				organizationData.value = e.data
				e.data?.forEach((item) => {
					item.organizationType = formatterDictData('DIC002', item.organizationType)
					console.log("item.organizationTypeitem.organizationTypeitem.organizationTypeitem.organizationType",item.organizationType)
				})

				range1.value = getDictData('DIC002')



			} else {
				uni.showToast({
					title: '获取组织信息失败',
					icon: 'none'
				})
			}
			uni.hideLoading()
		})
	}
</script>

<style lang="scss" scoped>
	.organization-container {
		background-color: #ffffff;
		min-height: calc(100vh - 85rpx);

		.searchbar {
			background-color: #fff;
			box-sizing: border-box;
			padding: 15rpx 40rpx;

			.search {
				border-radius: 80rpx;
				width: 100%;
				background-color: #f5f5f5;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.Unisearch {
					width: 100%;
				}

				.search_title {
					font-size: 28rpx;
					width: 100rpx;
				}
			}
		}

		.selectBar {
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			background-color: #fff;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;

			.item {
				margin-left: calc(50% - 90rpx);
				width: 180rpx;
				display: flex;
			}

			border-bottom: 1rpx solid #eee;
		}

		.organizationList {
			height: calc(100vh - 200rpx);
			overflow-y: auto;
			padding-top: 180rpx;
		}
	}
</style>